<template>
  <div class="radio-group" v-bind="$attrs">
    <div
      class="radio-item"
      v-for="item in radioList"
      :key="item.value"
      :class="{
        'radio-active': modelValue === item.value,
      }"
      @click="handleChange(item.value)"
    >
      <div class="radio-dot">
        <div class="radio-inner" v-if="modelValue === item.value"></div>
      </div>
      <div class="radio-label">{{ item.label }}</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    modelValue: {
      type: [String, Number],
      default: "",
    },
    radioList: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:modelValue"],
  methods: {
    handleChange (val) {
      this.$emit("update:modelValue", val);
    },
  },
  created () {
    if (!this.modelValue && this.radioList.length > 0) {
      this.$emit("update:modelValue", this.radioList[0].value);
    }
  },
};
</script>

<style lang="less" scoped>
@primary-color: #4b58dc;
/* 自定义单选框组样式 */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  .radio-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: #fff;

    &:hover {
      border-color: @primary-color;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);

      &:after {
        transform: translateX(120%) skewX(-15deg);
      }
    }

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: -75%;
      width: 50%;
      height: 100%;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0)
      );
      transform: skewX(-15deg);
      transition: all 0.5s ease;
    }

    .radio-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid #dcdfe6;
      margin-right: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;

      .radio-inner {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          @primary-color,
          lighten(@primary-color, 20%)
        );
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        animation: radioScale 0.3s forwards;
      }
    }

    .radio-label {
      font-size: 14px;
      color: #606266;
      transition: color 0.3s ease;
    }

    &.radio-active {
      border-color: @primary-color;
      background: linear-gradient(
        to right,
        rgba(58, 116, 241, 0.05),
        rgba(58, 116, 241, 0.02)
      );

      .radio-dot {
        border-color: @primary-color;
        background: #fff;
      }

      .radio-label {
        color: @primary-color;
        font-weight: 500;
      }
    }
  }
}
</style>
